﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Layout</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../../../scripts/boot.js" type="text/javascript"></script>
    <style type="text/css">
    html, body{
        margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
    }    
    </style>

</head>
<body>


<div id="layout1" class="mini-layout" style="width:100%;height:100%;"  borderStyle="border:solid 1px #aaa;">
    <div title="north" region="north" height="80" showSplitIcon="true" >
        north
    </div>
    <div title="south" region="south" showSplit="false" showHeader="true" height="80" showSplitIcon="true" >
        south
    </div>
    <div title="west" region="west" width="200" expanded="false" showSplitIcon="true">
        west
    </div>
    <div title="east" region="east"  showCloseButton="true" showSplitIcon="true">
        east
    </div>
    <div title="center" region="center"  >
        <input type="button" value="隐藏" onclick="hideHeader()"/>
        <input type="button" value="显示" onclick="showHeader()"/><br /><br />
        <input type="button" value="折叠" onclick="collapsePanel()"/>
        <input type="button" value="展开" onclick="expandPanel()"/>
    </div>
</div>
        


    

    
    <script type="text/javascript">
        mini.parse();

        var layout = mini.get("layout1");

        function hideHeader() {
            layout.updateRegion("north", { visible: false });            
        }
        function showHeader() {
            layout.updateRegion("north", { visible: true });
        }
        function collapsePanel() {
            layout.updateRegion("east", { expanded: false });
        }
        function expandPanel() {
            layout.updateRegion("east", { expanded: true });
        }

    </script>

</body>
</html>